<script setup>
import { useRoute, useRouter } from "vue-router";
import { onBeforeMount, ref } from "vue";
import { detailaction } from "@/api/topic";
import NavBar from "@/components/NavBar.vue";
const route = useRoute();
const router = useRouter();
const topicId = route.query.id;
const topicDetail = ref({});
const getDetail = async () => {
  const res = await detailaction({ id: topicId });
  topicDetail.value = res;
};

onBeforeMount(() => {
  getDetail();
});
const handleBack = () => {
  router.go(-1);
};
</script>

<template>
  <div class="detail-container">
    <van-sticky>
      <NavBar @leftclick="handleBack" title="专题详情" leftArrow></NavBar>
    </van-sticky>
    <div class="content" v-html="topicDetail.data.content"></div>
    <div class="title">专题推荐</div>
    <div class="recommend">
      <div
        class="recommend-item"
        v-for="item in topicDetail.recommendList"
        :key="item.id"
      >
        <img class="item-img" :src="item.scene_pic_url" alt="" />
        <div class="item-title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail-container {
  .content {
    :deep(img) {
      width: 100%;
    }
  }
  .title {
    font-family: PingFangSC-Medium;
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    margin: 40px 0 60px 0;
  }
  .recommend {
    .recommend-item {
      margin: 0 auto 31px;
      width: 710px;
      background-color: #fff;
      .item-img {
        width: 100%;
        height: 343px;
      }
      .item-title {
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        padding: 32px 0 52px 42px;
      }
    }
  }
}
</style>
